<template>
  <div>
    上传视频
    <el-upload
      class="upload-demo"
      drag
      action="http://localhost:8080/file/upload"
      :headers="token"
      :on-success="handleVideoUpload"
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    上传封面
    <el-upload
      class="upload-demo"
      drag
      action="http://localhost:8080/file/upload"
      :headers="token"
      :on-success="handleCoverUpload"
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>

    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="视频名字" prop="videoName">
        <el-input v-model="form.videoName" placeholder="请输入视频名字" />
      </el-form-item>
      <!--<el-form-item label="视频类型" prop="videoType">-->
      <!--  <el-input v-model="form.videoType" placeholder="请输入视频类型" />-->
      <!--</el-form-item>-->
      <!--<el-form-item label="视频第几集" prop="videoIndex">-->
      <!--  <el-input v-model="form.videoIndex" placeholder="请输入视频第几集" />-->
      <!--</el-form-item>-->
      <!--<el-form-item label="视频总集数" prop="videoCount">-->
      <!--  <el-input v-model="form.videoCount" placeholder="请输入视频总集数" />-->
      <!--</el-form-item>-->
      <el-form-item label="视频本地路径" prop="videoPath">
        <el-input v-model="form.videoPath" placeholder="请输入视频本地路径" />
      </el-form-item>
      <el-form-item label="视频封面" prop="videoCover">
        <el-input v-model="form.videoCover" placeholder="请输入视频封面" />
      </el-form-item>
      <!--<el-form-item label="视频作者" prop="videoAuthor">-->
      <!--  <el-input v-model="form.videoAuthor" placeholder="请输入视频作者" />-->
      <!--</el-form-item>-->
      <el-form-item label="视频日期" prop="videoDate">
        <el-date-picker clearable
                        v-model="form.videoDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择视频日期">
        </el-date-picker>
      </el-form-item>
      <!--<el-form-item label="视频时长" prop="videoTime">-->
      <!--  <el-input v-model="form.videoTime" placeholder="请输入视频时长" />-->
      <!--</el-form-item>-->
      <!--<el-form-item label="观看数" prop="videoWatchCount">-->
      <!--  <el-input v-model="form.videoWatchCount" placeholder="请输入观看数" />-->
      <!--</el-form-item>-->
      <!--<el-form-item label="评论数" prop="videoCommentsCount">-->
      <!--  <el-input v-model="form.videoCommentsCount" placeholder="请输入评论数" />-->
      <!--</el-form-item>-->
      <!--<el-form-item label="视频作者id" prop="videoAuthorid">-->
      <!--  <el-input v-model="form.videoAuthorid" placeholder="请输入视频作者id" />-->
      <!--</el-form-item>-->
      <el-form-item label="视频频道" prop="channelId">
        <el-dropdown @command="selectChannel">
          <span class="el-dropdown-link">
            选择频道<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item, index) in channelList" :key="item.id" :command="item"> {{ item.name }} </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-tag v-show="selectedChannel !== null" style="margin-left: 5px"> {{ selectedChannel }} </el-tag>
      </el-form-item>
    </el-form>

    <el-button @click="submission(0)">存草稿</el-button>
    <el-button type="primary" @click="submission(1)">立即投稿</el-button>
  </div>
</template>

<script>
import { addVideo, getVideo, updateVideo } from '@/api/video'
import { listChannel } from '@/api/channel'

export default {
  name: 'SubmissionPage',
  data () {
    return {
      videoId: null,
      channelList: [],
      selectedChannel: null,
      token: {
        Authorization: localStorage.getItem('token')
      },
      form: {
        videoPath: '',
        videoName: '',
        videoAuthor: JSON.parse(localStorage.getItem('user')).userName,
        videoAuthorid: JSON.parse(localStorage.getItem('user')).userId,
        videoType: 0,
        videoIndex: 1,
        videoCount: 1,
        videoTime: 0,
        videoDate: null,
        videoWatchCount: 0,
        videoCommentsCount: 0,
        likeCount: 0,
        collectCount: 0,
        videoCover: '',
        channelId: null,
        status: null
      }
    }
  },
  methods: {
    handleVideoUpload (res) {
      this.form.videoPath = res.data.url
      this.form.videoName = res.data.name
      this.form.videoDate = new Date()
    },
    handleCoverUpload (res) {
      this.form.videoCover = res.data.url
    },
    async submission (status) {
      // console.log(this.form)
      this.form.status = status
      if (this.videoId === 0) {
        await addVideo(this.form)
      } else {
        await updateVideo(this.form)
      }
      this.$router.push('/platform')
    },
    async selectChannel (item) {
      this.selectedChannel = item.name
      this.form.channelId = item.id
    }
  },
  async created () {
    this.videoId = this.$route.params.id
    const res1 = await getVideo(this.videoId)
    this.form = res1.data.data

    const res = await listChannel()
    this.channelList = res.data.rows
  }
}
</script>

<style scoped lang="less">
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
